<template>
	<view class="content">
		<view>
			<view class="head_text">
				<text style="font-weight: 600;font-size: 27rpx;">参考价格/(元/小时)</text>
			</view>

			<scroll-view class="header-top" scroll-x="true" scroll-left="120">
				<view class="header-title"  >
					<view class="scroll-view-item_H" v-for="(item,index)  in iList" :key="index" :style="{borderRadius: index === 0 ?'20rpx 0 0 0'  :'',borderRadius: index ===iList.length-1  ?'0 20rpx 0  0 '  :'' }"  >
						{{item.dictLabel}}
					</view>
				</view>

				<view style="display: flex;color: antiquewhite;">
					<view class="scroll-view-item_H2" v-for="(item,index) in iList"  >
						<view :style="[{'backgroundColor': colorList[index] }]" v-for="zi in item.chargingDtos">
							{{zi.dictLabel}}
						</view>
					</view>
				</view>
			</scroll-view>

		</view>
	</view>
</template>

<script>
	import {
		feeStandards
	} from '../../api/my/index.js'
	export default {
		data() {
			return {
				iList: [],
				colorList: ['#fff5f4', '#fef8e8', '#e2f0ff', '#effff5', '#a4a5f2']
			}
		},
		methods: {
			// 调接口
			chargeApi() {
				
				console.log('111');
				// let obj={

				// }
				feeStandards({
					dictType: 'educ_charging'
				}).then(res => {

					this.iList = res.data
				})
			}

		},
		onShow() {
			this.chargeApi()
		}
	}
</script>

<style scoped>
	.header-top {
		width: 100%;
		padding: 40rpx 10rpx;
		

		box-sizing: border-box;
	}

	.header-title {
		display: flex;
		
		
	}

	.content {
		min-height: 100vh;
		background-color: #f2f2f2;
		width: 100%;
		padding: 25rpx;
		
		box-sizing: border-box;
	}

	.content>view {
		width: 100%;
		background-color: #ffffff;
		/* border-radius: 10rpx; */
		border-radius: 20rpx;
	}

	.head_text {
		width: 100%;
		text-align: center;
		padding: 25rpx 0;
	}


	.scroll-view-item_H {
		font-size: 28rpx;
		/* text-align: center; */
		color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
		min-width: 180rpx;
		padding: 20rpx 0;
		background-color: #000000;
	}

	.scroll-view-item_H2 {
		font-size: 20rpx;

		text-align: center;
		color: #000000;
		min-width: 180rpx;
		box-sizing: border-box;
	}


	.scroll-view-item_H2>view {
		margin-bottom: 2rpx;
		border: 2rpx solid #dddfe1;
		display: flex;
		align-items: center;
		justify-content: center;
		height: 65rpx;
	}
</style>